<template>
  <div class="video-head">
    <div class="header">
      <div class="header-top">猫眼电影</div>
      <div class="caidan">
        <span class="iconfont icon-caidan"></span>
      </div>
    </div>
    <div class="video-nav">
      <div class="nav-left">
        <div class="left-two">猫眼</div>
        <div class="left-three">发现最新最热电影</div>
      </div>
      <div class="nav-right">打开APP ></div>
    </div>
    <ul class="video">
      <!-- 从lis中获取缓存的数据进行循环渲染 -->
      <li class="list" v-for="(item, index) in lis" :key="index">
        <div class="video-bottom-movie">
          <video :src="item.video.url" controls></video>
        </div>
        <div class="di">
          <div class="foot">
            <div class="imge"><img :src="item.user.avatarurl"></div>
            <div class="name">{{ item.user.nickName }}</div>
            <div class="tietle"> {{ item.title }}</div>
          </div>
          <hr>
        </div>
      </li>
    </ul>
    <div class="dianzi"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      lis: {}
    }
  },
  created() {
    this.getlis()
  },
  methods: {
    getlis() {
      this.$axios.get("/video/short/10").then((re) => { //或许id数据通过方法放回给geilis进行数据渲染
        this.lis = re.data.data.feeds //解构数据
        console.log("re============",re)
       
      });
    }
  }
};
</script>

<style scoped>














* {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 60px;
  color: black;
  text-align: center;
}

.header-top {
  width: 100%;
  height: 5vh;
  background-color: #9c0e0cda;
  font-size: 22px;
  display: flex;
  justify-content: center;
  color: #e2dedd;
  font-family: "宋体";
  padding-top: 10px;
}

.video-nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}

.nav-left {
    width: 70%;
    display: flex;
    align-items: center;
}

.left-two {
    width: 100px;
    padding-left:10px ;
    display: flex;
    font-size: 25px;
    color: #de5f4d;
    border: 1px rgb(231, 226, 226) solid;
    margin-left: 10px;
    border-radius: 25px;
    background-color: rgba(243, 238, 238, 0.966);
}

.left-three {
    color:#0a2752a8;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    /* border: 1px red solid; */
    justify-content: center;
}

.nav-right {
    width: 30%;
    font-size: 20px;
    color: #b17f84;
    font-weight: 800;
    padding: 5px 0 0 5px;
}

.list{
  width: 100%;
  margin-top: 20px;
  /* width: 100%; */
 
  /* border: 1px rgba(0, 0, 0, 0.13) solid; */
}

.video-bottom-movie{
  height: 400px;
}

.tietle{
  font-size: 20px;
  overflow: hidden;
}
.imge{
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 25px;
}
 .name{
  width: 200px;
  padding-top: 15px;
  margin-left: 60px;
  font-size: 20px;
}

.dianzi{
  height: 6ch;
}  
</style>